<template id="HelloWorld">

  <div class="hello">

    <swiper :options="swiperOption" ref="mySwiper" class="swiperContent">
      <!-- slides -->
      <swiper-slide v-for="b in banner" :key="b.adId">
        <img :src="b.adFilePath" >
      </swiper-slide>
      <!--<swiper-slide>-->
        <!--<img src="http://localhost:8080/uploadFiles/uploadImgs/18ad1b7866d348c78242fd78575dc91220171226175105.png">-->
      <!--</swiper-slide>-->
      <!--<swiper-slide>-->
        <!--<img src="../assets/image/bannerLogo2.png">-->
      <!--</swiper-slide>-->
      <!--<swiper-slide>-->
        <!--<img src="../assets/image/bannerLogo3.png">-->
      <!--</swiper-slide>-->

      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>


    <div class="main_module bg_ff">
      <div class="row">
        <div class="col" @click="goPage('pay/paySign', $event)">
          <div>
            <div>
              <i class="icon iconfont icon-money"></i>
            </div>
            <p>缴费签约</p>
          </div>
        </div>
        <div class="col" @click="goPage('pay/payParty', $event)">
          <div>
            <div>
              <i class="icon iconfont icon-dangwei"></i>
            </div>
            <p>缴纳党费</p>
          </div>
        </div>
        <div class="col" style="border-right: none" @click="goPage('pay/paidFee', $event)">
          <div>
            <div>
              <i class="icon iconfont icon-dingdanfeiyong"></i>
            </div>
            <p>已缴费用</p>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col" style="border-bottom: none" @click="goPage('', $event)">
          <div>
            <div>
              <i class="icon iconfont icon-yinhangqia"></i>
            </div>
            <p>我的银行卡</p>
          </div>
        </div>
        <div class="col" style="border-bottom: none" @click="goPage('mine/myNew', $event)">
          <div>
            <div style="position: relative">
              <i class="icon iconfont icon-xiaoxi"></i>
              <p class="unRead" v-if="newNum && newNum != 0" style="color: #fff">{{newNum}}</p>
              <!--<mt-badge size="small" color="#ff4444" class="xiaoxi_num">{{newNum}}</mt-badge>-->
            </div>

            <p>我的消息</p>

          </div>
        </div>
        <div class="col" style="border-right: none;border-bottom: none" @click="goPage('mine/myInfo', $event)">
          <div>
            <div>
              <i class="icon iconfont icon-people"></i>
            </div>
            <p>个人中心</p>
          </div>
        </div>
      </div>
    </div>

    <div class="payFee_main">
      <div class="payFee_head bg_ff row">
          <div class="col">待缴费用</div>
          <div class="col col-20 tr" @click="showAll = !showAll"> {{word}}</div>
      </div>
      <div v-if="!userId" class="noLogin">
          <p class="col_bbb">您尚未登录，无法查看待缴费用</p>
          <div class="login_btn" @click="goPage('', $event)">
              立即登录
          </div>
      </div>
      <div v-else="">
        <div class="payFee_content" v-if="showList.length">
          <div class="payFee_item bg_ff" v-for="item in showList"
               @click="goPay('pay/Pay', item)">
            <div class="row">
              <div class="col">
                <p class="fs_13">{{item.corpName}}</p>
                <div>
                  <span class="fs_11">应缴费用</span>
                  &nbsp;&nbsp;
                  <span class="fs_11 col_0ae">{{item.totalAmt | formatNumber}}元</span>
                </div>
              </div>
              <div class="col tr col-25">
                <span class="payFee_item_btn">立即缴费</span>
              </div>
            </div>
            <div class="row">
              <div class="col fs_11">缴纳用户&nbsp;{{item.feeUserName}}</div>
              <div class="col fs_11 tr">最后缴纳日期&nbsp;{{new Date(item.endDate*1000) | textFormate}}</div>
            </div>
          </div>

        </div>
        <div v-else="" class="noFee_paid_div">
          <div class="noFee_paid">
            暂无待缴费用
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>

  import comJs from '../js/common'
  import Vue from 'vue'

  Vue.filter( 'textFormate' , function(value) {
    return value.Format('yyyy-MM-dd') ;
  });

  export default {
    data () {
      return {
        swiperOption: {
          autoplay:6000,  //每秒中轮播一次
          loop:true,  //可以让图片循环轮播
          autoplayDisableOnInteraction:false,  //在点击之后可以继续实现轮播
          pagination:".swiper-pagination",  //让小圆点显示
          paginationClickable:true,  //实现小圆点点击
          observer:true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents:true//修改swiper的父元素时，自动初始化swiper
        },
        banner: [],

        userId: '',
        pay_fee_arr: [],
        showAll: false,

        newNum: '',


        busy: true,     //分页数据来源
        page:1,
        pageSize:10
      }
    },
    methods: {
      goPage: function (url, e) {
        if(this.userId){
          if(e.srcElement.innerHTML.indexOf('我的银行卡')>-1 || e.srcElement.className.indexOf('icon-yinhangqia')>-1){
            window.location.href = this.$urlAll.bank_card+ 'clientid='+ this.$urlAll.clientid +'&accesstoken='+sessionStorage.getItem('token')
              +'&userid='+ sessionStorage.getItem('userId') +'&isBranches=true&encrypt_type=raw&headerbar=1&wpRedirect='
          } else {
            this.$router.push({path: url});
          }
        } else {
          window.location.href = this.$urlAll.bank_login+ 'clientid='+ this.$urlAll.clientid +'&clientSecret='+ this.$urlAll.clientSecret +
            '&isBranches=true&encrypt_type=raw&wpRedirect='+ this.$urlAll.indexHref;

          //console.log(window.location.href);
        }

      },

      goPay: function (url, item) {
        this.$router.push({path: url, query: item})
      }

    },

    //获取后台数据，dom渲染之前
    created: function(){

      var that = this;

      this.$post(this.$urlAll.query_banner).then(function (response) {

        that.banner = response.t.pAdList;
      });


      if(comJs.getUrl() && comJs.getUrl().userid) {

        window.sessionStorage.setItem('userId', comJs.getUrl().userid);
        window.sessionStorage.setItem('token', comJs.getUrl().accessToken);
        this.userId = window.sessionStorage.getItem('userId');

      } else if(window.sessionStorage.getItem('userId')){

        this.userId = window.sessionStorage.getItem('userId');
      }

      if(this.userId){


        //待交费用列表查询
        this.$post(this.$urlAll.query_delay_payment, {openAccount: sessionStorage.getItem('userId')}).then(function (response) {

          that.pay_fee_arr = response.t.paymentList;

        });

        //我的消息条数
        this.$post(this.$urlAll.query_notityNum, {openAccount: sessionStorage.getItem('userId')}).then(function (response) {

          that.newNum = response.t[0].typeNum;

        })
      }

    },
    computed: {
     word: function () {
       if(this.pay_fee_arr.length > 3){
         if(this.showAll == false){　　　　　　　　　　　//对文字进行处理
           return '展开全部'
         }else{
           return '收起'
         }
       }

     },
     showList:function(){

       if(this.pay_fee_arr.length > 3){
         if(this.showAll == false){
           var showList = [];
           for(var i=0;i<3;i++){
             showList.push(this.pay_fee_arr[i])
           }
         } else {
           showList = this.pay_fee_arr
         }
         return showList;
       } else {
         return this.pay_fee_arr;
       }
     },
     // banner: function () {
     //   //我的banner图片
     //   this.$post(this.$urlAll.query_banner).then(function (response) {
     //
     //
     //     return response.t.pAdList;
     //
     //   })
     // }
   }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  @import "../style/common.css";
  @import "../assets/css/swiper.min.css";

  .unRead{
    min-width: 0.13rem;
    padding: 0.01rem;
    height: 0.13rem;
    line-height: 0.13rem;
    font-size: 0.06rem;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 50%;
    background: #ff0000;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    cursor: pointer;
  }


  .xiaoxi_num{
    position: absolute;
    right:15%;
    bottom: 50%;
    padding: 1px;
  }

  .swiperContent{
    height: 1.45rem;
  }
  .swiperContent img{
    width: 100%;
    height: 100%;
  }
  .main_module {
    margin-bottom: 0.1rem;
    text-align: center;
  }
  .main_module .col{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.15rem;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
  }
  .main_module p{
    color: #333;
    font-size: 0.13rem;
    margin-top: 0.12rem;
  }
  .main_module i{
    font-size: 0.27rem;
  }



  .payFee_head{
    padding: 0 0.1rem;
    line-height: 0.44rem;
    color: #333;
    border-bottom: 1px solid #eee;
  }
  .payFee_item{
    padding: 0 0.1rem;
    margin-bottom: 0.05rem;
  }
  .payFee_item .row:first-child{
    padding: 0 0.2rem;
    height: 0.72rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid #eee;
  }
  .payFee_item_btn{
    width: 0.75rem;
    height: 0.26rem;
    border: 1px solid #c9c9c9;
    border-radius: 0.14rem;
    font-size: 0.11rem;
    display: inline-block;
    text-align: center;
    line-height: 0.26rem;
  }
  .payFee_item .row:last-child{
    padding: 0 0.2rem;
    height: 0.44rem;
    line-height: 0.44rem;
    color: #999;
  }
  .noFee_paid_div{
    margin-bottom: 0.1rem;
    background: #fff;
    padding: 0.3rem 0;
  }
  .noFee_paid{
    width: 1.44rem;
    height: 0.39rem;
    line-height: 0.39rem;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 0.2rem;
    color: #bbb;
    margin: 0 auto;
  }

  .noLogin{
    text-align: center;
    padding: 0.25rem;
    background: #fff;
  }
  .login_btn{
    width: 1.1rem;
    height: 0.29rem;
    line-height: 0.29rem;
    color: #fff;
    background: #ff4444;
    border-radius: 0.2rem;
    margin: 0.2rem auto 0;
  }

  .icon-money:before, .icon-yinhangqia:before{
    color: #00aaee;
  }
  .icon-yinhangqia:before{
    font-size: 0.22rem;
  }
  .icon-dangwei:before, .icon-xiaoxi:before{
    color: #ff4444;
  }
  .icon-dingdanfeiyong:before, .icon-people:before{
    color: #00c192;
  }


</style>
